<template>
  <div class="faster">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="快捷操作设置" name="1" :icon="CaretRight">
        <div class="data-fast">
          <el-table :data="fastList" stripe style="width: 100%">
            <el-table-column prop="title" label="参数名称" />
            <el-table-column prop="path" label="路径" />
            <el-table-column prop="key" label="关键字" />
            <el-table-column label="图标">
              <template #default="scope">
                <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row.icon"
                />
              </template>
            </el-table-column>
            <el-table-column label="状态" width="130">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 0 ? 'danger' : 'success'"
                  disable-transitions
                >
                  {{ scope.row.status === 0 ? "停用" : "正常" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column>
              <template #default="scope">
                <div>
                  {{ scope.row.key === "common" ? "快捷操作" : "系统预览" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="scope">
                <el-button
                  type="text"
                  @click="oper(scope.row.id, 1)"
                  :icon="scope.row.status === 0 ? Lock : Unlock"
                >
                  {{ scope.row.status === 0 ? "启用" : "禁用" }}
                </el-button>
                <el-button
                  type="text"
                  :icon="Delete"
                  @click="oper(scope.row.id, 2)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import request from "@/assets/js/request";
import { ElMessage } from "element-plus";
import { CaretRight, Delete, Lock, Unlock } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";

const fastList = ref([]);
const activeNames = ref([]);

const getFastList = () => {
  request
    .get("/setting/fast/fast")
    .then((res) => {
      if (res.code === 200) {
        fastList.value = res.data;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const handleChange = (i) => {
  console.log(i);
};

const oper = (id, type) => {
  request
    .get(`/setting/fast/save?id=${id}&type=${type}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.error("操作成功");
        getFastList();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

onMounted(() => {
  getFastList();
});
</script>

<style scoped lang="scss">
.faster {
  padding: 20px;
  box-sizing: border-box;
  font-size: 18px;
}

.item {
  display: grid;
  grid-template-columns: 1fr 4fr;
  div {
    margin-right: 30px;
  }
}
</style>
